import React from "react";
import util from "@/DragAndDrop/utils";
export default function DragComponent(props){
    const {item} = props;
    let realOptions = {};
    realOptions = item['component_option'];
    const type = item['component_type'];
    let dragJson = {};
    // 尝试转换为json
    try{
        realOptions = JSON.parse(item['component_option']);
    }catch(e){
    }
    let realType = '';
    if(type == '00'){
        realType = '00';
        dragJson = {
            type:{
                "name":realType
            },// 用于鉴别组件类型,div,img,span,柱状图，饼状图，等等。。。。
            children:[],
            id:'normalcharts_'+new Date().getTime(),// 组件id
            props:{
                style:{
                    width:'300px',
                    height:'300px'
                },// 组件style，常规样式，宽高，背景色等等
                options:realOptions,
                className:'',// 组件的className
                bgpic:''
            },
            addition:{
                position:{left:0,top:0}
            },
            "mappingVariableName":""
        };
    }
    else if(type == "01"){
        realType = '01';
        dragJson = {
            type:{
                "name":realType
            },// 用于鉴别组件类型,div,img,span,柱状图，饼状图，等等。。。。
            children:[],
            id:'mapcharts_'+new Date().getTime(),// 组件id
            props:{
                style:{
                    width:'300px',
                    height:'300px'
                },// 组件style，常规样式，宽高，背景色等等
                options:realOptions,
                className:'',// 组件的className
                bgpic:''
            },
            addition:{
                position:{left:0,top:0}
            },
            "mappingVariableName":""
        };
    }
    else if(type == 'custom'){
        realType = 'custom';
        dragJson = {
            type:{
                "name":realType
            },// 用于鉴别组件类型,div,img,span,柱状图，饼状图，等等。。。。
            children:[],
            id:'custom_'+new Date().getTime(),// 组件id
            props:{
                style:{
                    position:'relative',
                    width:'300px',
                    height:'300px',
                },// 组件style，常规样式，宽高，背景色等等
                className:'',// 组件的className
                bgpic:'',
                divcomponentdata:""
            },
            addition:{
                position:{left:0,top:0}
            },
            "mappingVariableName":""
        };
    }
    else if(type == 'rowlayout'){
        realType = 'rowlayout';
        dragJson = {
            type:{
                "name":realType
            },// 用于鉴别组件类型,div,img,span,柱状图，饼状图，等等。。。。
            children:[],
            id:'rowlayout_'+new Date().getTime(),// 组件id
            props:{
                style:{
                    position:'raletive',
                    width:'100%',
                    height:'100%',
                },// 组件style，常规样式，宽高，背景色等等
                className:'',// 组件的className
                bgpic:''
            },
            addition:{
                position:{left:0,top:0}
            },
            "mappingVariableName":""
        };
    }
    else if(type == 'collayout'){
        realType = 'collayout';
        dragJson = {
            type:{
                "name":realType
            },// 用于鉴别组件类型,div,img,span,柱状图，饼状图，等等。。。。
            children:[],
            id:'collayout_'+new Date().getTime(),// 组件id
            props:{
                style:{
                    position:'relative',
                    width:'100%',
                    height:'100%',
                },// 组件style，常规样式，宽高，背景色等等
                className:'',// 组件的className
                bgpic:''
            },
            addition:{
                position:{left:0,top:0}
            },
            "mappingVariableName":""
        };
    }
    const dragRef = util.getDragRef(dragJson);
    return <div ref={dragRef} className={'dlc-lp-vc-area'}>
        {
            item.iconurl ? <img className={'dlc-lp-vc-area-img'} src={item.iconurl}/> : null
        }
        <div className={'dlc-lp-vc-area-name'}>{item.component_name}</div>
    </div>
}